<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>TeamCloud | Login</title>
<link rel="stylesheet" href="css/login.css" media="screen">
<style>body{background:url(img/bg.png) center;margin: 0 auto;width: 960px;padding-top: 50px}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}.login-form{margin: 50px auto;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 
    // Check if JavaScript is enabled
    $('body').addClass('js');
 
    // Make the checkbox checked on load
    $('#login-form span').addClass('checked').children('input').attr('checked', true);
 
    // Click function
    $('#login-form span').on('click', function() {
 
        if ($(this).children('input').attr('checked')) {
            $(this).children('input').attr('checked', false);
            $(this).removeClass('checked');
        }
 
        else {
            $(this).children('input').attr('checked', true);
            $(this).addClass('checked');
        }
 
    });
    
    /* attach a submit handler to the form */
    $("#login-form form").submit(function(event) {
	    /* stop form from submitting normally */
	    event.preventDefault(); 
	        
	    /* get some values from elements on the page: */
	    var $form = $( this ),
	    username = $form.find( 'input[name="username"]' ).val(),
	    password = $form.find( 'input[name="password"]' ).val(),
	        url = $form.attr( 'action' );
	    /* Send the data using post and put the results in a div */
	    $.post( url, { 'username': username, 'password': password }, function(data) {result=data} )
			.success(function(){location.href = "/_ah/spi/success";})
			.error(function() { alert("입력한 사용자 이름 또는 비밀번호가 잘못되었습니다."); })
			.complete(function() { ; });
	});
 
});
</script>
</head>
<body>

	<div class="login-form" id="login-form">
	    <h1>Login</h1>
	    <form action="/_ah/spi/login">
	        <input type="text" name="username" placeholder="username">
	        <input type="password" name="password" placeholder="password">
	        <span>
	            <input type="checkbox" name="checkbox">
	            <label for="checkbox">remember</label>
	        </span>
	        <input type="submit" value="log in">
	    </form>
	</div>
	
	<div class="footer"><p>By <a href="http://vtimbuc.net/">Valeriu Timbuc</a> for <a href="http://designmodo.com">DesignModo</a>.</p></div>

</body>
</html>